{% extends "base.html" %}
{% load staticfiles %}
{% block title %}天天生鲜-商品列表{% endblock %}

{% block body %}
	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>	
				<span></span>			
				<ul class="subnav">
                    {% for category in categorys %}
					<li><a href="{% url 'goods:list' category.id 1 %}" class="{{ category.logo }}">{{category.name}}</a></li>
					{% endfor %}
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">手机生鲜</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>

	<div class="breadcrumb">
		<a href="{% url 'goods:index' %}">全部分类</a>
		<span>></span>
		<a href="{% url 'goods:list' category.id 1 %}">{{ category.name }}</a>
	</div>

	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推荐</h3>
				<ul>
					{% for sku in new_skus %}
					<li>
						<a href="{% url 'goods:detail' sku.id %}"><img src="{{ sku.default_image.url}}"></a>
						<h4><a href="{% url 'goods:detail' sku.id %}">{{ sku.name }}</a></h4>
						<div class="prize">￥{{ sku.price }}</div>
					</li>
					{% endfor %}
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<div class="sort_bar">
				<a href="{% url 'goods:list' category.id 1 %}?sort=default" {% if sort == "default" %}class="active"{% endif %}>默认</a>
				<a href="{% url 'goods:list' category.id 1 %}?sort=price" {% if sort == "price" %}class="active"{% endif %}>价格</a>
				<a href="{% url 'goods:list' category.id 1 %}?sort=hot" {% if sort == "hot" %}class="active"{% endif %}>人气</a>
			</div>

			<ul class="goods_type_list clearfix">
				{% for sku in page_skus %}
				<li>
					<a href="{% url 'goods:detail' sku.id %}"><img src="{{ sku.default_image.url }}"></a>
					<h4><a href="{% url 'goods:detail' sku.id %}">{{ sku.name }}</a></h4>
					<div class="operate">
						<span class="prize">￥{{ sku.price }}</span>
						<span class="unit">{{ sku.price }}/{{ sku.unit }}</span>
						<a href="#" class="add_goods" title="加入购物车"></a>
					</div>
				</li>
                {% endfor %}
			</ul>

			<div class="pagenation">
				{% if page_skus.has_previous %}
				<a href="{% url 'goods:list' category.id page_skus.previous_page_number %}?sort={{sort}}"><上一页</a>
				{% endif %}

				{% for p in page_list %}
				<a href="{% url 'goods:list' category.id p %}?sort={{sort}}" {% if p == page_skus.number %}class="active"{% endif %}>{{p}}</a>
				{% endfor %}

				{% if page_skus.has_next %}
				<a href="{% url 'goods:list' category.id page_skus.next_page_number %}?sort={{sort}}">下一页></a>
				{% endif %}

			</div>
		</div>
	</div>
{% endblock %}

{% block footer %}
	<div class="popup_con">
		<div class="popup">
			<p>加入购物车成功！</p>
		</div>

		<div class="mask"></div>
	</div>
{% endblock %}

{% block bottom_files %}
	<script type="text/javascript" src="{% static 'js/jquery-1.12.2.js' %}"></script>
	<script type="text/javascript">
		$('.add_goods').click(function(){
            var req_data = {
                sku_id: $(this).attr("sku_id"),
                count: 1,
                csrfmiddlewaretoken: "{{ csrf_token }}"
            }
			$.post('/cart/add', req_data, function(data){
				if (0 == data.code) {
					$("#show_count").html(data.cart_num);
					$('.popup_con').fadeIn('fast', function() {
						setTimeout(function(){
							$('.popup_con').fadeOut('fast',function(){
							});
						},1000)
					});
				} else {
				    alert(data.message);
                }
			});
		});
	</script>
{% endblock %}